<template>
  <div style="padding-top: 10px">
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-bottom: 10px"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="姓名" sortable></el-table-column>
      <el-table-column label="操作" fixed="right" width="200" sortable>
        <template slot-scope="scope">
          <i
            v-if="scope.row.status == 1"
            type="primary"
            class="el-icon-check"
          ></i>
          <i
            v-if="scope.row.status == -1"
            type="danger"
            class="el-icon-close"
          ></i>
          <div @click="go2Student(scope.$index)">
            <el-progress
              v-if="scope.row.status == 0"
              :text-inside="true"
              :stroke-width="26"
              :percentage="
                scope.row.schedule == 3
                  ? scope.row.schedule * 33 + 1
                  : scope.row.schedule * 33
              "
            ></el-progress>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  computed: { ...mapState({ tableData: (state) => state.students }) },

  methods: {
    ...mapMutations(["selectStudent"]),

    go2Student(index) {
      //alert(index);
      this.selectStudent(index);
      this.$router.push("/studentApplication");
    },
  },
};
</script>

<style scoped>
i {
  font-size: 25px;
}
</style>